<template>
  <div>
    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      max-height="590"
    >
      <el-table-column
        fixed
        prop="username"
        label="用户名"
        width="150"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
      />
      <el-table-column
        prop="phone"
        label="电话"
        width="150"
      />
      <el-table-column
        prop="password"
        label="密码"
        width="150"
      />
      <el-table-column
        prop="address"
        label="地址"
        width="300"
      />
      <el-table-column
        prop="postalCode"
        label="邮编"
        width="120"
      />
      <el-table-column
        align="right"
      >
        <template slot="header" slot-scope="{}">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
          />
        </template>

        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click.native.prevent="deleteRow(scope.$index, tableData)"
          >删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-button type="primary" style="margin-top: 20px; float: right;" @click="handleAdd">添加</el-button>
    <el-dialog :visible.sync="dialogVisible" title="编辑用户信息">
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editForm.phone" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm.password" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editForm.address" />
        </el-form-item>
        <el-form-item label="邮编">
          <el-input v-model="editForm.postalCode" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          username: '12345678',
          name: '白泽楠',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'AAA',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'BBB',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'CCC',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'DDD',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'SSS',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'EEE',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'EWW',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'RRR',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'QQQ',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'XXX',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        },
        {
          username: '12345678',
          name: 'NNN',
          phone: '1234567890',
          password: '1111123',
          address: '陕西省西安市西部科技创新港',
          postalCode: '200333'
        }

      ],
      search: '',
      dialogVisible: false,
      editForm: {
        username: '',
        name: '',
        phone: '',
        password: '',
        address: '',
        postalCode: ''
      },
      isEditing: false,
      editIndex: -1
    }
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    handleEdit(row) {
      this.isEditing = true
      this.dialogVisible = true
      this.editIndex = this.tableData.indexOf(row)
      this.editForm = { ...row }
    },
    saveEdit() {
      if (this.isEditing) {
        // 编辑用户信息
        if (this.editIndex !== -1) {
          this.$set(this.tableData, this.editIndex, { ...this.editForm })
        }
      } else {
        // 添加新用户
        this.tableData.push({ ...this.editForm })
      }
      this.dialogVisible = false
    },
    handleAdd() {
      this.isEditing = false
      this.editForm = {
        username: '',
        name: '',
        phone: '',
        password: '',
        address: '',
        postalCode: ''
      }
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.el-dialog {
  width: 50%;
}
</style>
